<template>
  <div>
    <div id="treeChart" :style="{width: '1250px', height: '500px', padding: '30px'}"></div>
  </div>
</template>

<script>
  import echarts from "echarts";

  export default {
    name: "eCharts",
    data() {
      return {
        treedata:[{ //一定要注意这里有[]
          name: '本科发展方向',
          children: [
            {
              name: '考研',
              children: [
                {
                  name: '目标院校'
                },
                {
                  name: '目标专业'
                }
              ]
            },
            {
              name: '就业',
              children: [
                {
                  name: '计算机行业'
                },
                {
                  name: '非计算机行业'
                }
              ]
            },
            {
              name: '考公',
              children: [
                {
                  name: '公务员'
                },
                {
                  name: '教师'
                },
                {
                  name: '医生'
                },
                {
                  name: '等类型'
                }
              ]
            },
            {
              name: '留学',
              children: [
                {
                  name: '相关文件（申请流程、交换要求）'
                }
              ]
            },
            {
              name: '创业'
            }
          ]
        }]
      }
    },
    mounted() {
      this.showChart();
    },
    methods: {
      showChart() {
        // 基于准备好的dom，初始化echarts实例

        const myChart = echarts.init(document.getElementById('treeChart'));
        // 指定图表的配置项和数据
        const option = {
          title: {
            text: 'ECharts 树图示例'
          },
          tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
          },
          series: [
            {
              type: 'tree',

              data: this.treedata,

              top: '1%',
              left: '7%',
              bottom: '1%',
              right: '20%',

              symbolSize: 7,

              label: {
                position: 'left',
                verticalAlign: 'middle',
                align: 'right',
                fontSize: 13
              },

              leaves: {
                label: {
                  position: 'right',
                  verticalAlign: 'middle',
                  align: 'left'
                }
              },

              expandAndCollapse: true,
              animationDuration: 550,
              animationDurationUpdate: 750
            }
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }
    }
  }
</script>

<style>
  .ml30{
    margin-left: 100px;
  }
  .m50{
    margin: 100px
  }
</style>


